use carpet::base::param::Json;
use leptos::{prelude::*, task::spawn_local};
use leptos_use::{
    use_web_notification_with_options, NotificationDirection, ShowOptions,
    UseWebNotificationOptions, UseWebNotificationReturn,
};
use thaw::*;

use crate::{
    components::{atom::textarea::ChatTextarea, title_bar::TitleBar},
    state::ClientManager,
};
use pane_resizer::{Direction, Pane, PaneGroup, PaneResizer};

pub mod content;
pub mod dialogue;

#[component]
pub fn Chat() -> impl IntoView {
    view! {
        <TitleBar>{}</TitleBar>
        <div class="flex-grow">
            <PaneGroup>
                <Pane default_size=17.0 class="min-w-[150px]">
                    <ChatLeftPanel />
                </Pane>
                <PaneResizer class="flex w-[4px] border-r-[1px] border-r-inherit">{""}</PaneResizer>
                <Pane default_size=83.0 class="flex-grow min-w-[150px]">
                    <ChatRightPanel />
                </Pane>
            </PaneGroup>
        </div>
    }
}

#[component]
pub fn ChatLeftPanel() -> impl IntoView {
    let UseWebNotificationReturn { show, .. } = use_web_notification_with_options(
        UseWebNotificationOptions::default()
            .direction(NotificationDirection::Auto)
            .language("en")
            .renotify(true)
            .tag("test"),
    );
    let value = RwSignal::new(String::from(""));

    use template_api::api::demo::text::*;
    let add_click = move |_| {
        let title = value.get();
        show(ShowOptions::default().title("Hello World from leptos-use"));
        let show = show.clone();
        spawn_local(async move {
            let client: HandleClient<_, _> = ClientManager::get_client();
            let request_data = RequestData { title, age: None, description: vec![] };
            let result = client._handle(Json(request_data)).await.unwrap();
            if let Ok(result) = result.data {
                show(ShowOptions::default().title(result.title));
            } else {
                show(ShowOptions::default().title(result.message));
            }
        });
    };
    view! {
        <div class="min-w-0 flex flex-row ml-[15px] mt-[10px] mr-[11px]">
            <Input value placeholder="搜索" class="flex-grow min-w-0 border-none bg-gray-200">
                <InputPrefix slot>
                    <Icon icon=icondata::CgSearch />
                </InputPrefix>
            </Input>
            <Button
                on:click=add_click
                class="border-inherit ml-[8px] border-none bg-gray-200"
                icon=icondata::IoAdd
            ></Button>
        </div>
    }
}

#[component]
pub fn ChatRightPanel() -> impl IntoView {
    view! {
        <PaneGroup direction=Direction::Vertical>
            <Pane default_size=60.0 class="min-h-[150px]">
                <div data-tauri-drag-region class="w-full h-full">
                    {"Top"}
                </div>
            </Pane>
            <PaneResizer class="flex h-[4px]">{""}</PaneResizer>
            <Pane default_size=40.0 class="flex-grow min-h-[150px]">
                <div class="h-full w-full">
                    <ChatTextarea
                        style="width: calc(100% - 20px); height: calc(100% - 5px);"
                        class="max-h-none mt-0 ml-[10px] mr-[10px]"
                    />
                </div>
            </Pane>
        </PaneGroup>
    }
}
